<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>思途Java250703班级 · 自定义动态壁纸版</title>
    <style>
        html,body{
            height:100%;
            margin:0;
            /* 使用CSS渐变作为备用背景 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color:#fff;
            font-family:'Segoe UI',Arial,Helvetica,sans-serif;
            overflow:hidden;
        }
        body{display:flex;flex-direction:column;}

        /* 主背景样式 */
        .main-bg {
            position: fixed;
            inset: 0;
            z-index: -3;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        /* GIF背景图层 */
        .gif-bg {
            position: fixed;
            inset: 0;
            z-index: -2;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .gif-bg.loaded {
            opacity: 1;
        }

        #wallpaper{
            position:fixed;
            inset:0;
            z-index:999999;
            /* 使用渐变作为备用背景 */
            background: linear-gradient(45deg, #ff3cac 0%, #784ba0 50%, #2b86c5 100%);
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:opacity .5s ease;
        }

        /* 壁纸GIF背景 */
        .wallpaper-gif {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .wallpaper-gif.loaded {
            opacity: 1;
        }

        #wallpaper h1{
            position: relative;
            z-index: 2;
            font-size:2.5rem;
            font-weight:700;
            background:linear-gradient(90deg,#ff3cac,#784ba0,#2b86c5);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            background-clip:text;
            text-shadow:0 0 20px rgba(255,60,172,.6);
            text-align: center;
            padding: 2rem;
            border-radius: 1rem;
            backdrop-filter: blur(10px);
            background-color: rgba(0,0,0,0.3);
        }

        #bg-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;}

        #subtitle-box{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;}
        #subtitle{position:absolute;white-space:nowrap;font-size:1.6rem;font-weight:700;background:linear-gradient(90deg,#ff3cac,#784ba0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding:.6rem 1.2rem;border-radius:.8rem;box-shadow:0 0 15px rgba(255,60,172,.4);}
        #content-box{flex:2;padding:1.5rem;display:flex;align-items:flex-start;justify-content:center;}
        .content-card{width:96%;max-width:1000px;max-height:90%;padding:2rem;border-radius:1rem;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);box-shadow:0 0 20px rgba(255,60,172,.3);overflow-y:auto;}

        .btn-apply {
            display: inline-block;
            margin-top: 1rem;
            padding: 0.8rem 2rem;
            background: linear-gradient(90deg, #ff3cbe, #784ba0);
            color: white;
            text-decoration: none;
            border-radius: 0.5rem;
            font-weight: 700;
            transition: transform 0.2s;
        }

        .btn-apply:hover {
            transform: translateY(-2px);
        }

        .login-form{
            margin-top:1.5rem;max-width:320px;margin-left:auto;margin-right:auto;
            display:flex;flex-direction:column;gap:.8rem;
        }
        .login-form label{
            font-weight:700;font-size:1rem;
        }
        .login-form input[type=text],
        .login-form input[type=password],
        .login-form input[type=submit],
        .login-form input[type=button]{
            width:100%;padding:.65rem .8rem;border:none;border-radius:.5rem;
            background:rgba(255,255,255,.15);color:#fff;font-size:1rem;
        }
        .login-form input::placeholder{color:rgba(255,255,255,.7);}
        .login-form input:focus{
            outline:none;background:rgba(255,255,255,.25);
            box-shadow:0 0 10px #ff3cac;
        }
        .login-form input[type=submit],
        .login-form input[type=button]{
            background:linear-gradient(90deg, #ff3cbe,#784ba0);
            font-size:1.1rem;font-weight:700;cursor:pointer;
            transition:transform .2s;
        }
        .login-form input[type=submit]:hover,
        .login-form input[type=button]:hover{transform:translateY(-2px);}

        /* 调试信息样式 */
        .debug-info {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            z-index: 10000;
            max-width: 300px;
        }
    </style>
</head>
<body>

<!-- 主背景 -->
<div class="main-bg"></div>

<!-- GIF背景 -->
<div class="gif-bg" id="mainGifBg"></div>

<!-- 壁纸点击消失 -->
<div id="wallpaper">
    <div class="wallpaper-gif" id="wallpaperGif"></div>
    <h1>点击进入 · 船船之家</h1>
</div>

<canvas id="bg-canvas"></canvas>

<div id="subtitle-box">
    <div id="subtitle">欢迎来到思途Java250703班级学习 祝每位学生学业有成，拿到自己满意的offer！</div>
</div>

<div id="content-box">
    <div class="content-card">
        <h2>�� 思途教育简介</h2>
        <p>思途教育成立于2015年，专注<strong>Java 全栈</strong>、<strong>前端</strong>、<strong>大数据</strong>人才培养，累计帮助 <strong>5000+</strong> 学员成功就业，平均月薪 <strong>15K+</strong>。</p>

        <h2>�� 课程体系</h2>
        <ul>
            <li>JavaSE 基础 + 设计模式</li>
            <li>Spring 全家桶 + 微服务</li>
            <li>Vue3 + React 前端实战</li>
            <li>MySQL / Redis / ES 深度优化</li>
            <li>电商/金融/IM 大型项目实战</li>
        </ul>

        <h2>�� 学员成果</h2>
        <p>2024 年 7 月班就业率 <strong>98%</strong>，最高薪资 <strong>28K</strong>，平均 17K。</p>

        <a class="btn-apply" href="<%= request.getContextPath() %>/teacher_add.jsp">立即报名</a>

        <!-- 登录表单 -->
        <h2 style="text-align:center;margin-top:2rem;">学员登录</h2>
        <form class="login-form" action="<%= request.getContextPath() %>/user?method=login" method="post">
            <label>用户名
                <input type="text" name="name" placeholder="请输入用户名" required>
            </label>
            <label>密　码
                <input type="password" name="password" placeholder="请输入密码" required>
            </label>
            <input type="submit" value="登 录">
            <input type="button" value="注 册" onclick="window.location.href='<%= request.getContextPath() %>/user_register.jsp'">
        </form>
    </div>
</div>

<!-- 调试信息 -->
<div class="debug-info" id="debugInfo">
    正在加载背景图片...
</div>

<script>
    // 获取上下文路径
    const contextPath = '<%= request.getContextPath() %>';
    const debugInfo = document.getElementById('debugInfo');

    // 更新调试信息
    function updateDebugInfo(message) {
        debugInfo.innerHTML += '<br>' + new Date().toLocaleTimeString() + ': ' + message;
        console.log(message);
    }

    updateDebugInfo('页面加载完成，上下文路径: ' + contextPath);

    // 预加载GIF图片的函数
    function preloadGif(src, callback) {
        updateDebugInfo('开始预加载: ' + src);
        const img = new Image();

        img.onload = function() {
            updateDebugInfo('✅ 成功加载: ' + src);
            callback(true, src);
        };

        img.onerror = function() {
            updateDebugInfo('❌ 加载失败: ' + src);
            callback(false, src);
        };

        // 添加时间戳防止缓存
        const timestamp = new Date().getTime();
        img.src = src + '?t=' + timestamp;
    }

    // 设置背景图片
    function setBackground(element, imageSrc) {
        element.style.backgroundImage = `url('${imageSrc}')`;
        element.classList.add('loaded');
    }

    // 图片路径
    const mainBgPath = contextPath + '/images/6666.gif';
    const wallpaperPath = contextPath + '/images/wallpaper.gif';

    updateDebugInfo('主背景路径: ' + mainBgPath);
    updateDebugInfo('壁纸路径: ' + wallpaperPath);

    // 预加载主背景
    preloadGif(mainBgPath, function(success, src) {
        if (success) {
            const mainGifBg = document.getElementById('mainGifBg');
            setBackground(mainGifBg, src);
        } else {
            updateDebugInfo('主背景加载失败，使用CSS渐变');
        }
    });

    // 预加载壁纸背景
    preloadGif(wallpaperPath, function(success, src) {
        if (success) {
            const wallpaperGif = document.getElementById('wallpaperGif');
            setBackground(wallpaperGif, src);
        } else {
            updateDebugInfo('壁纸背景加载失败，使用CSS渐变');
        }
    });

    // 壁纸点击事件
    const wallpaper = document.getElementById('wallpaper');
    wallpaper.addEventListener('click', () => {
        wallpaper.style.opacity = '0';
        setTimeout(() => {
            wallpaper.remove();
            // 3秒后隐藏调试信息
            setTimeout(() => {
                debugInfo.style.display = 'none';
            }, 3000);
        }, 500);
    }, { once: true });

    // 粒子效果
    const cvs = document.getElementById('bg-canvas');
    const ctx = cvs.getContext('2d');

    function resizeCanvas() {
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
    }

    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    const particles = [];
    const colors = ['#ff3cac','#784ba0','#2b86c5'];
    const count = 40;

    for (let i = 0; i < count; i++) {
        particles.push({
            x: Math.random() * cvs.width,
            y: Math.random() * cvs.height,
            r: Math.random() * 1.5 + 0.5,
            dx: (Math.random() - 0.5) * 0.2,
            dy: (Math.random() - 0.5) * 0.2,
            color: colors[i % colors.length]
        });
    }

    function draw() {
        ctx.clearRect(0, 0, cvs.width, cvs.height);
        particles.forEach(p => {
            p.x += p.dx;
            p.y += p.dy;
            if (p.x < 0 || p.x > cvs.width) p.dx *= -1;
            if (p.y < 0 || p.y > cvs.height) p.dy *= -1;
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
            ctx.fillStyle = p.color;
            ctx.globalAlpha = 0.6;
            ctx.fill();
        });
        requestAnimationFrame(draw);
    }
    draw();

    // 滚动字幕
    const subtitle = document.getElementById('subtitle');
    let pos = subtitle.parentElement.offsetWidth;
    function scroll() {
        pos -= 2;
        subtitle.style.left = pos + 'px';
        if (pos < -subtitle.offsetWidth) {
            pos = subtitle.parentElement.offsetWidth;
        }
        requestAnimationFrame(scroll);
    }
    scroll();

    // 页面加载完成后的检查
    window.addEventListener('load', function() {
        updateDebugInfo('所有资源加载完成');

        // 检查图片是否真的存在
        fetch(mainBgPath)
            .then(response => {
                if (response.ok) {
                    updateDebugInfo('✅ 主背景文件存在且可访问');
                } else {
                    updateDebugInfo('❌ 主背景文件不存在或无法访问: ' + response.status);
                }
            })
            .catch(error => {
                updateDebugInfo('❌ 主背景文件检查失败: ' + error.message);
            });

        fetch(wallpaperPath)
            .then(response => {
                if (response.ok) {
                    updateDebugInfo('✅ 壁纸文件存在且可访问');
                } else {
                    updateDebugInfo('❌ 壁纸文件不存在或无法访问: ' + response.status);
                }
            })
            .catch(error => {
                updateDebugInfo('❌ 壁纸文件检查失败: ' + error.message);
            });
    });
</script>
</body>
</html>
